<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Echarts Demo</title>
</head>
<body>
	 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:600px"></div>
    <script type="text/javascript" src="lib/echarts/build/dist/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="lib/echarts/build/dist/echarts.js"></script>
    <script type="text/javascript">
   
    (function(){
    	// 路径配置
	    require.config({
	        paths: {
	            echarts: 'lib/echarts/build/dist'
	        }
	    });
	    
    	require(['echarts','echarts/chart/radar'],function(ec){
    		
    		var a = 0;
    		// 基于准备好的dom，初始化echarts图表
    		 var myChart = ec.init(document.getElementById('main'));
    		 var option = {
    				    title : {
    				        text: '预算 vs 开销（Budget vs spending）',
    				        subtext: '纯属虚构'
    				    },
    				    tooltip : {
    				        trigger: 'axis'
    				    },
    				    legend: {
    				        orient : 'vertical',
    				        x : 'right',
    				        y : 'bottom',
    				        data:['预算分配（Allocated Budget）','实际开销（Actual Spending）']
    				    },
    				    toolbox: {
    				        show : true,
    				        feature : {
    				            mark : {show: true},
    				            dataView : {show: true, readOnly: false},
    				            restore : {show: true},
    				            saveAsImage : {show: true}
    				        }
    				    },
    				    polar : [
    				       {
    				           indicator : [
    				               { text: '销售（sales）',axisLabel:{show:true,textStyle:{fontSize:18,color:'#333'}}},
    				               { text: '管理（Administration）'},
    				               { text: '信息技术（Information Techology）'},
    				               { text: '客服（Customer Support）'},
    				               { text: '研发（Development）'},
    				               { text: '市场（Marketing）'}
    				            ]
    				        }
    				    ],
    				    calculable : true,
    				    series : [
    				        {
    				            name: '预算 vs 开销（Budget vs spending）',
    				            type: 'radar',
    				            data : [
    				                {
    				                    value : [a,a ,a ,a ,a ,a],
    				                    name : '预算分配（Allocated Budget）'
    				                },
    				                 {
    				                    value : [a,a ,a ,a ,a ,a ],
    				                    name : '实际开销（Actual Spending）'
    				                }
    				            ]
    				        }	
    				    ]
    				};
    		 
    		// 为echarts对象加载数据 
    		 myChart.setOption(option);
    	});
    	
    })();
	 
    	
    	         
    
    </script>
</body>
</html>